<template>
	<!-- vue3页面 -->
	<div>
		<el-button @click="btn1">1</el-button>
		<el-button @click="btn2">2</el-button>
		<el-switch
			v-model="value3"
			inline-prompt
			active-text="是"
			inactive-text="否"
		/>
	</div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from "vue";
import treeData from "@/utils/treeData";
export default defineComponent({
	name: "home",
	setup() {
		const value3 = ref(true)
		const dataSource = ref(treeData);
		const tree = ref([
			{ label: "日期",id:1,pid:'root' },
			{
				label: "所有",id:2,pid:1,
				children: [{
						label: "11",id:3,pid:2,
						children: [{ label: "11-1",id:4,pid:3, }, { label: "11-2",id:5,pid:3, }, { label: "11-3",id:6,pid:3, }],
					},
					{
						label: "22",id:7,pid:2,
						children: [
							{ label: "22-1" },
							{
								label: "22-2",id:8,pid:7,
								children: [{ label: "222-1",id:9,pid:8, }, { label: "222-2",id:10,pid:8, }],
							},
							{ label: "22-3",id:11,pid:7, },
						],
					},
					{ label: "33",id:12,pid:2, },
				],
			},
			{ label: "现金",id:13,pid:'root', },
		]);
		const list: any = ref([]);
		const labelList: any = ref([]);
		let level = 0;
		const btn1 = () => {
			console.log(tree.value, "shushushu");
			getTreeList(tree.value);
		};
		const btn2 = () => {
			forTree(tree.value);

			labelList.value = [];

			var merges = getMerges(tree.value);
      		var heah = getHead(tree.value);

			console.log(merges);
			console.log(heah);
			
		};
		const forTree = (data: any) => {
			for (let i in data) {
				let element = data[i];
				forTree(element.children);
			}
		};

		const getTreeList = (data: any) => {
			for (let i in data) {
				let element = data[i];
				list.value.push(element);
				getTreeList(element.children);
			}
		};

		const getMerges = (json: any) => {
			let r = getDepth(json);
			let d = r.depth;
			let w = r.width;
			var arr = json;
			let tempArr = [];
			var clu = 0;
			var level = 0;
			var obj: any = {
				root: {
					sc: 0,
					ec: 0,
				},
			};
			while (arr.length > 0) {
				var cObj: any = {};
				var temp = [];
				for (var i = 0; i < arr.length; i++) {
					temp.push(arr[i]);
				}
				arr = [];
				for (var i = 0; i < temp.length; i++) {
					if (temp[i].children) {
						cObj[temp[i].label] = temp[i].children;
						for (var j = 0; j < temp[i].children.length; j++) {
							arr.push(temp[i].children[j]);
						}
					}
				}
				if (arr.length > 0) {
					clu = obj[temp[0].pid].sc;
					for (var i = 0; i < temp.length; i++) {
						console.log(temp[i],'temptemp',obj[temp[i].pid]);
						
						let len = obj[temp[i].pid].ec;
						if (clu === len) {
							clu = obj[temp[0].pid].sc;
						}
						let sr = 0,
							er = 0,
							sc = 0,
							ec = 0;
						if (temp[i].children) {
							let a = cObj[temp[i].label];
							let { depth, width } = getDepth(a);
							sr = level;
							er = d - 1 - depth;
							sc = clu;
							ec = clu + width - 1;
							clu = ec + 1;
							obj[temp[i].id] = {
								sc: sc,
								ec: ec,
							};
						} else {
							sr = level;
							er = d - 1;
							sc = clu;
							ec = clu;
							clu++;
						}
						tempArr.push({
							s: { r: sr, c: sc },
							e: { r: er, c: ec },
						});
					}
				}
				level++;
			}
			console.log("count74===", JSON.stringify(tempArr));
			return tempArr;
		};
		const getHead = (json: any) => {
			let r = getDepth(json);
			var hh = [];
			// 初始化数组
			for (var i = 0; i < r.depth; i++) {
				var tem = [];
				for (var j = 0; j < r.width; j++) {
					tem.push({
						label: "",
					});
				}
				hh.push(tem);
			}
			var arr = json;
			var clu = 0;
			var level = 0;
			//用来查找父节点下标
			var obj: any = {
				root: {
					sc: 0,
					ec: 0,
				},
			};
			while (arr.length > 0) {
				var cObj: any = {};
				var temp = [];
				for (var i = 0; i < arr.length; i++) {
					temp.push(arr[i]);
				}
				arr = [];
				for (var i = 0; i < temp.length; i++) {
					if (temp[i].children) {
						cObj[temp[i].label] = temp[i].children;
						for (var j = 0; j < temp[i].children.length; j++) {
							arr.push(temp[i].children[j]);
						}
					}
				}
				clu = obj[temp[0].pid].sc;
				for (var i = 0; i < temp.length; i++) {
					let len = obj[temp[i].pid].ec;
					if (clu === len) {
						clu = obj[temp[0].pid].sc;
					}
					var sc = 0,
						ec = 0;
					if (temp[i].children) {
						hh[level][clu] = { label: temp[i].label };
						let a = cObj[temp[i].label];
						let { width } = getDepth(a);
						sc = clu;
						ec = clu + width - 1;
						clu = ec + 1;
						obj[temp[i].id] = {
							sc: sc,
							ec: ec,
						};
					} else {
						hh[level][clu] = { label: temp[i].label };
						clu++;
					}
				}
				level++;
			}
			console.log("header==", hh);
			return hh;
		};
		const getDepth = (json: any) => {
			var arr = json;
			var depth = 0;
			var width = 0;
			while (arr.length > 0) {
				var temp = [];
				for (var i = 0; i < arr.length; i++) {
					temp.push(arr[i]);
				}
				arr = [];
				for (var i = 0; i < temp.length; i++) {
					if (temp[i].children) {
						for (var j = 0; j < temp[i].children.length; j++) {
							arr.push(temp[i].children[j]);
						}
					} else {
						width++;
					}
				}
				if (arr.length >= 0) {
					depth++;
				}
			}
			return { depth, width };
		};

		return {
			btn1,
			btn2,
			value3
		};
	},
});
</script>

<style scoped>

</style>